<template>
  <div class="index">
    <!-- <div class="search">
      <el-input v-model="queryKey" placeholder="请输入内容" id="searchtxt" ></el-input>
      <el-button icon="el-icon-search" circle id="btnsearch"  @click="search"></el-button>
    </div> -->
    <img src="../../../images/轮播图四.jpg" alt="" class="img1">
    <!-- <input type="text" name="" id="" v-model="queryKey"> -->
    <!-- <input type="button"  value="搜索" name="" @click="search"> -->


    <el-tabs type="border-card" class="tabs" v-model="activeName" >
      <template>
        <el-tab-pane label="雪域燕麦" class="tab" name="tabOne">
          <template slot-scope="scope">
            <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
              <el-col :span="5" v-for="(product, index) in products">
                <div :key="product.type" v-if="product.type == 1" style="margin-bottom: 20px;">
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="'/products/' + product.imgPath" class="image">
                    <div style="padding: 14px;">
                      <span>{{ product.productName }}</span>
                      <div class="bottom clearfix">
                        <time class="time"></time>
                        <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-tab-pane>
        <el-tab-pane label="雪域口味" class="tab" name="tabTwo">
          <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
            <el-col :span="5" v-for="(product, index) in products">
              <div :key="product.type" v-if="product.type == 2" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="'/products/' + product.imgPath" class="image">
                  <div style="padding: 14px;">
                    <span>{{ product.productName }}</span>
                    <div class="bottom clearfix">
                      <time class="time"></time>
                      <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="芝士口味" class="tab" name="tabThree">
          <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
            <el-col :span="5" v-for="(product, index) in products">
              <div :key="product.type" v-if="product.type == 3" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="'/products/' + product.imgPath" class="image">
                  <div style="padding: 14px;">
                    <span>{{ product.productName }}</span>
                    <div class="bottom clearfix">
                      <time class="time"></time>
                      <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="巧克力味" class="tab" name="tabFour">
          <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
            <el-col :span="5" v-for="(product, index) in products">
              <div :key="product.type" v-if="product.type == 2" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="'/products/' + product.imgPath" class="image">
                  <div style="padding: 14px;">
                    <span>{{ product.productName }}</span>
                    <div class="bottom clearfix">
                      <time class="time"></time>
                      <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="慕斯口味" class="tab" name="tabFive">
          <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
            <el-col :span="5" v-for="(product, index) in products">
              <div :key="product.type" v-if="product.type == 1" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="'/products/' + product.imgPath" class="image">
                  <div style="padding: 14px;">
                    <span>{{ product.productName }}</span>
                    <div class="bottom clearfix">
                      <time class="time"></time>
                      <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="鲜果口味" class="tab" name="tabSix">
          <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
            <el-col :span="5" v-for="(product, index) in products">
              <div :key="product.type" v-if="product.type == 2" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="'/products/' + product.imgPath" class="image">
                  <div style="padding: 14px;">
                    <span>{{ product.productName }}</span>
                    <div class="bottom clearfix">
                      <time class="time"></time>
                      <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </template>
    </el-tabs>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>

export default {
  name: 'CakeView',
  data() {
    return {
      queryKey: '',
      input: '',
      products: [],
      activeName: 'tabOne'
    }
  },
  methods: {
    search() {
      //1.获取搜索关键字
      let queryKey = this.queryKey
      // 2.路由跳转到商品列表组件
      this.$router.push({ path: '/NavProductList', query: { queryKey } })
    },
    goDetail(pId) {
      this.$router.push('/detail?productId=' + pId)
    },
    // changeType(tab, event) {
    //   this.axios.get('/api/Cake')
    //   console.log(tab, event)
    //   if (tab.name == 'tabOne') {
    //     this.tabOne();
    //   } else if (tab.name == 'tabTwo') {
    //     this.tabTwo();
    //   } else if (tab.name == 'tabThree') {
    //     this.tabThree();
    //   } else if (tab.name == 'tabFour') {
    //     this.tabFour();
    //   } else if (tab.name == 'tabFive') {
    //     this.tabFive();
    //   } else if (tab.name == 'tabSix') {
    //     this.tabSix();
    //   }
    // },
    // tabOne() {
    //   console.log('我是雪域燕麦')

    // },
    // tabTwo() {
    //   console.log('我是雪域口味')
    // },
    // tabThree() {
    //   console.log('我是芝士口味')
    // },
    // tabFour() {
    //   console.log('我是巧克力口味')
    // },
    // tabFive() {
    //   console.log('我是慕斯口味')
    // },
    // tabSix() {
    //   console.log('我是鲜果口味')
    // },
  },

  created() {
    this.axios.get('/api/getAllProducts')
      .then(res => {
        console.log('res:', res.data.data)
        this.products = res.data.data
      })
  }
}
</script>
<style lang="scss" scoped>
.card {
  width: 340px;
  height: 460px;
  border-radius: 5%;
}

.image {
  width: 100%;
  display: block;
  position: relative;
  right: 5px;
}

::v-deep .el-button--text {
  color: red;
}

/* .index{
    margin: 0 20%;
  } */
</style>
<style>
.index {
  width: 50%
}

.tabs {
  width: 1200px;
  margin: 0 20%;
}

ul {
  list-style: none;
}

li {
  float: left;
  margin: 20px;
  width: 220px
}

.img1 {
  width: 1200px;
  height: 320px;
  margin: 0 20%;
}

.explain {
  font-size: 12px;
  max-height: 36px;
  color: #949494;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image {
  margin-left: 5px;
  border-radius: 5%;
  position: relative;
  bottom: 5px;
}
</style>